<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/aui.css">
    <link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/my.css">
	<link rel="stylesheet" href="css/myClass.css" />
    <style>
        .aui-bar-btn-item {
            border: none;
        }
		.tab-head{
	    overflow: auto;
	    overflow-x: auto !important;
	    overflow-y: hidden;
	    white-space: nowrap;
	  }
    .tab-head-item{
	    vertical-align: middle;
	    display: inline-block;
	    overflow: hidden;
	    text-align: center;
	    padding: 0 .2rem;
	    font-size: .7rem;
      }
      .tab-head-item i{
      	display: block;
    	width: 40%;
    	height: 2px;
    	border-radius: 5px;
    	-webkit-border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	background: transparent; 
      	margin: 3px auto 0;
      }
     .tab-head-item.aui-class-active{
     	color: #333;
     	font-weight: bold;
     	font-size: .75rem;
     } 
    .tab-head-item.aui-class-active i{ 
    	background: #ef4c4f; 
     
	}
    </style>
</head>

<body class="aui-background-white">
    <!--header-->
    <header class="aui-bar aui-bar-nav aui-bar-nav-search aui-text-default aui-background-white">
        <a class="aui-pull-left aui-btn " href="JavaScript:history.go(-1)">
	        <span class="aui-iconfont aui-icon-left aui-text-gray"></span>
	    </a>
        <div class="aui-title">
           	 排行榜
        </div>
		<a class="aui-pull-right aui-btn aui-font-size-12 aui-text-primary" href="myText.html">
		    去投稿
		</a>
    </header>

    <!--购物车已有商品列表-->
   <section class="aui-flexView">
	   <div class="aui-scrollView">
		   <div class="" style="margin-top: 2.8rem;">
			   <div class="aui-margin-t-10" style="height: 1.8rem;border-bottom: 1px solid #eee;">
					<ul class="tab-head aui-padded-l-15 aui-padded-r-15">
						<li class="tab-head-item aui-class-active">
							第16期
							<i></i>
						</li>
						<li class="tab-head-item">第15期<i></i></li>
						<li class="tab-head-item">第14期<i></i></li>
						<li class="tab-head-item">第13期<i></i></li>
						<li class="tab-head-item">第12期<i></i></li>
						<li class="tab-head-item">第11期<i></i></li>
						<li class="tab-head-item">第10期<i></i></li>
						
					</ul>
				</div>
			   <div class="tab-panel" style="margin-top: 0.5rem;">
				   <div class="tab-active">
					   <div class="aui-items-list aui-position-relative">
					   		<div class="aui-top-imgs">
					   			<div class="aui-list-content">
						   				点赞倒计时 <span>3</span> 天 <span>1</span> 小时
						   			</div>
					   			
					   		</div>
						   <a href="user-textDetail.html" class="aui-flex" style="justify-content: space-between;">
							   <div class="aui-display-flex" style="align-items: center;">
								   <div class="aui-font-size-15 aui-display-flex aui-text-info aui-font-weight" style="width: 20px;">
									   状元
								   </div>
								   <div class="aui-flex-car-img aui-position-relative aui-add-img aui-zy-img">
									   	<span>
									   		<img src="images/zy.png" alt="" class="aui-position-absolute"/>
									   	</span>
									   <img src="images/user.png" alt="">
								   </div>
								   <div class="" style="line-height: 1.3;transform: scale(.95);">
									   <div class="aui-font-size-13 aui-font-weight" style="color: #333;">生命只有一次</div>
									   <p class="aui-font-size-12 aui-text-gray" style="margin-top: 5px;">10号 李小明</p>
									   <p><img src="images/vip.png" alt="" style="width: 1rem;"></p>
								   </div>
							   </div>
							   <div class="aui-flex-top">
								   <h2 class="aui-text-center">
										<i class="aui-iconfont aui-icon-laud"></i>
										<p class="aui-font-size-12 aui-text-gray">123</p>
								   </h2>
							   </div>
						   </a>
						   <a href="javascript:;" class="aui-flex" style="justify-content: space-between;">
							   <div class="aui-display-flex" style="align-items: center;">
								   <div class="aui-font-size-15 aui-display-flex aui-text-info aui-font-weight" style="width: 20px;">
									   榜眼
								   </div>
								  <div class="aui-flex-car-img aui-position-relative aui-add-img aui-by-img">
									   	<span>
									   		<img src="images/by.png" alt="" class="aui-position-absolute"/>
									   	</span>
									   <img src="images/user.png" alt="">
								   </div>
								   <div class="" style="line-height: 1.3;transform: scale(.95);">
									   <div class="aui-font-size-13 aui-font-weight" style="color: #333;">生命只有一次</div>
									   <p class="aui-font-size-12 aui-text-gray" style="margin-top: 5px;">10号 李小明</p>
									   <p><img src="images/vip.png" alt="" style="width: 1rem;"></p>
								   </div>
							   </div>
							   <div class="aui-flex-top">
								   <h2 class="aui-text-center">
										<i class="aui-iconfont aui-icon-laud"></i>
										<p class="aui-font-size-12 aui-text-gray">123</p>
								   </h2>
							   </div>
						   </a>
						   <a href="javascript:;" class="aui-flex" style="justify-content: space-between;">
							   <div class="aui-display-flex" style="align-items: center;">
								   <div class="aui-font-size-15 aui-display-flex aui-text-info aui-font-weight" style="width: 20px;">
									   探花
								   </div>
								   <div class="aui-flex-car-img aui-position-relative aui-add-img aui-th-img">
									   	<span>
									   		<img src="images/th.png" alt="" class="aui-position-absolute"/>
									   	</span>
									   <img src="images/user.png" alt="">
								   </div>
								   <div class="" style="line-height: 1.3;transform: scale(.95);">
									   <div class="aui-font-size-13 aui-font-weight" style="color: #333;">生命只有一次</div>
									   <p class="aui-font-size-12 aui-text-gray" style="margin-top: 5px;">10号 李小明</p>
									   <p><img src="images/vip.png" alt="" style="width: 1rem;"></p>
								   </div>
							   </div>
							   <div class="aui-flex-top">
								   <h2 class="aui-text-center">
										<i class="aui-iconfont aui-icon-laud"></i>
										<p class="aui-font-size-12 aui-text-gray">123</p>
								   </h2>
							   </div>
						   </a>
					   </div>
				   </div>
			   </div>
		   </div>
	   </div>
   </section>
<div class="aui-inner-wrap">			
	<footer class="aui-footer aui-footer-fixed">
		<a href="index.html" class="aui-tabBar-item">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-loan"></i>
	        </span>
			<span class="aui-tabBar-item-text">首页</span>
		</a>
		<a href="myClass.html" class="aui-tabBar-item ">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-credit"></i>
	        </span>
			<span class="aui-tabBar-item-text">课程</span>
		</a>
		<a href="textList.html" class="aui-tabBar-item aui-tabBar-item-active">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-ions"></i>
	        </span>
			<span class="aui-tabBar-item-text">投稿</span>
		</a>
		<a href="my.html" class="aui-tabBar-item ">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-my"></i>
	        </span>
			<span class="aui-tabBar-item-text">我的</span>
		</a>
	</footer>
</div>

    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
		$('body').on('click','.tab-head-item',function(){
			$(this).addClass('aui-class-active').siblings().removeClass('aui-class-active')
		})

    </script>

</body>

</html>
